<template>
  <view>
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view solt="top">
        <u-navbar title="招聘职位" height="50" title-size="36"></u-navbar>
      </view>
      <u-gap height="20" bg-color="#F0F1F2"></u-gap>
      <view class="warpper">
        <view class="message-box" v-for="(item, index) in itemList" :key="index">
          <view
            class="top dis-flex flex-y-between flex-y-center"
            @click="routeTo('/users/job/work-detail?id=' + item.id)"
          >
            <view class="t-r dis-flex flex-y-between flex-y-center">
              <view class="status" v-if="item.status == 1">置顶中</view>
              <view class="tl">热控专业工程师</view>
            </view>
            <view class="t-l dis-flex flex-y-between flex-y-center">
              <view class="price">7-10K/月</view>
              <u-icon name="/static/more.png" size="28"></u-icon>
            </view>
          </view>
          <view class="label">
            <text class="text">贵阳</text>
            <text class="text">3-5年 </text>
            <text class="text">五险一金 </text>
            <text class="text">本科</text>
            <text class="text">绩效奖金 </text>
            <text class="text">年终奖</text>
          </view>
          <view class="count dis-flex flex-y-between flex-y-center">
            <view class="count-item dis-flex flex-y-between flex-y-center">
              <view class="num">128</view>
              <view class="des">已查看(人)</view>
            </view>
            <view class="count-item dis-flex flex-y-between flex-y-center">
              <view class="num">128</view>
              <view class="des">已查看(人)</view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>

    <u-popup v-model="show" height="320" border-radius="15" mode="bottom">
      <view class="popup-box">
        <view class="btn btn-desc"> 确认取消关注该用户？ </view>
        <view class="btn btn-confirm"> 取消关注 </view>
        <u-gap height="20" bg-color="#F0F1F2"></u-gap>
        <view class="btn" @click="show = !show"> 取消 </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      imgStyle: {
        width: '12rem'
      },
      itemList: [{ status: 1 }, { status: 1 }, { status: 1 }, {}, {}, {}]
    }
  },
  methods: {
    queryList(page, pageSize) {
      this.initData(page, pageSize)
    },
    initData(page, pageSize) {
      //let self = this;
      // self.$u.api.getOrderList({
      // 	limit: pageSize,
      // 	page: page,
      // 	status: status
      // }).then(res => {
      // 	self.onOrderLoad(self.current, res.list, false);
      // }).catch(res => {
      // 	self.onOrderLoad(self.current, null, false);
      // });
      //this.onOrderLoad(this.current, this.itemList, false);
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  // padding: 30rpx 0;
  background-color: #f0f1f2;
}
.warpper {
  padding: 0 20rpx;
}
.message-box {
  height: 300rpx;
  background: #ffffff;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  padding: 30rpx 20rpx;
  .top {
    margin-bottom: 18rpx;
    .t-r {
      .status {
        height: 36rpx;
        background: #ed624f;
        border-radius: 6rpx;
        line-height: 36rpx;
        font-size: 20rpx;
        color: #ffffff;
        padding: 0 10rpx;
      }
      .tl {
        margin-left: 10rpx;
        font-size: 34rpx;
        color: #333333;
        font-weight: 600;
      }
    }
    .t-l {
      .price {
        font-size: 34rpx;
        color: #10a28f;
        font-weight: 600;
        margin-right: 4rpx;
      }
    }
  }
  .label {
    margin-bottom: 18rpx;
    .text {
      height: 36rpx;
      background: #f0f0f0;
      border-radius: 5rpx;
      font-size: 20rpx;
      color: #666666;
      line-height: 36rpx;
      padding: 0 8rpx;
      margin-right: 10rpx;
    }
  }
  .count {
    height: 132rpx;
    background: #f5f5f5;
    border-radius: 10rpx;
    padding: 20rpx 80rpx;
    .count-item {
      height: 100%;
      flex-flow: column;
      .num {
        color: #333333;
        font-size: 32rpx;
        font-weight: 600;
      }
      .des {
        color: #666666;
        font-size: 26rpx;
      }
    }
  }
}
</style>
